<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <!-- 引入vue和element-ui的js库-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .Inp{
            width: 300px;
        }
    </style>
</head>
<body >



    <div id="app">
        <input  name="input" value="#(users)" class="Inp">

        <div class="content" v-for="(item,index) in arr">
            <div class="content_Cen">
                <div class="content_Cen">
                    <p>数据：{{index+1}}</p>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.uname"
                                :value="item.id">
                        </el-option>
                    </el-select>
            </div>
            <div class="btn">
                <el-button type="danger" @click="del(index)">删除</el-button>
            </div>
        </div>
        <div class="bot">
            <el-button type="primary" @click="add">添加一条</el-button>
            <el-button type="primary" @click="obtain">获取</el-button>
        </div>
    </div>


</body>
<script>
var app = new Vue({
    el: '#app',
    data: {
        input: '',
        arr: [
            {
                index: 1,
                value: ''
            }
        ],
        options: [],
        value:''
    },
    computed: {},
    created() {
        var inp = $(".Inp").val()
        this.options = inp
        console.log(inp)
        console.log(typeof(this.options))
    },
    methods: {
        // 添加
        add (){

            this.arr.push({
                index: this.arr.length + 1,
                value: ''
            })
        },
        // 删除
        del(index) {
            if (this.arr.length === '1') {
                this.$message({
                    type: 'error',
                    message: '最少保留一条数据'
                })
                return
            }
            this.arr.splice(index,1)
            for (var i = 0; i < this.arr.length; i ++ ) {
                this.arr[i].index = i + 1
            }
        },
        // 获取
        obtain() {
            console.log(this.arr)
        }
    }
})

</script>
</html>
